<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta http-equiv="Cache-Control" content="no-transform" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="generator" content="HBuilder X 2.9.3" />
		<meta name="description" content="iou.ink" />
		<meta name="author" content="1074637681@qq.com" />

		<title></title>
		<script src="./iconfont.js"></script>
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
		<style>
			.icon {
				width: 48px;
				height: 48px;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			.midicon{
				width: 120px;
				height: 60px;
			}
			.smallicon {
				width: 26px;
				height: 26px;
			}
			* {
				text-align: center;
				moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select:none;
				-khtml-user-select:none;
				-webkit-user-select:none;
				-ms-user-select:none;
				user-select:none;
			}
			#window {
				margin: 0 auto;
				border: #0077AA 2px solid;
				width: 350px;
			}

			.others {
				font-size: 26px;
				float: left;
				margin: auto;
			}
			.iconclick{
				margin: auto;
			}
			.clicktext{
				color: #007AFF;
			}
		</style>
	</head>
	<body><br>
		<div style="margin: 0 auto;width: 350px;">
			<div style="margin:0 auto;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
				<button id="close_ac" type="button" class="btnnn" style="margin: auto;">
					<svg class="icon smallicon" aria-hidden="true">
						<use xlink:href="#icon-guanbi"></use>
					</svg><a style="font-size: 24px;">关闭空调</a>
				</button>
				<div style="margin: auto;">
					<svg class="icon midicon" style="color: #0062CC;" aria-hidden="true">
						<use xlink:href="#icon-kongtiao1"></use>
					</svg>

				</div>
				<select style="margin: auto;" id="ac_type">
					<option value="volvo">格力空调</option>
					<option value="saab">美的空调</option>
				</select>
			</div>
		</div>
		<!----------面板---------->
		<div id="window">
			<div><span style="font-size: 64px;">温度:<span id="temperature" style="color: #0077AA;">--</span></span>
				<svg class="icon" style="width: 56px;height:56px;" aria-hidden="true">
					<use xlink:href="#icon-wendu"></use>
				</svg>
			</div>
			<hr>
			<div style="margin:0 auto;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
				<span class="others">模式:
					<span id="mode_icon">
						<svg class="icon smallicon" aria-hidden="true">
							<use xlink:href="#icon-icon-12"></use>
						</svg>
					</span>
				</span>
				<span class="others">
					风速: <span id="fan_speed" style="color: #0062CC;">1</span>
				</span>
				<span class="others">
					灯光:<span id="light_mode" style="color: #0062CC;"> 开</span>
				</span>
			</div>
		</div><br>
		<!----------调节---------->
		<div id="ctrl" style="margin: 0 auto;width: 350px;">
			<!----------模式调节----------> 
			<div style="margin:0 auto;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
				<span id="mode_cool" class="iconclick">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-icon-12"></use>
					</svg><br><span class="clicktext">制冷</span>
				</span>
				<span id="mode_heat" class="iconclick">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-heat"></use>
					</svg><br><span class="clicktext">制热</span>
				</span>
				<span id="mode_dry" class="iconclick">
					<svg class="icon" style="color: #0078FF;" aria-hidden="true">
						<use xlink:href="#icon-chushi"></use>
					</svg><br><span class="clicktext">除湿</span>
				</span>
				<span id="mode_fan" class="iconclick">
					<svg class="icon" style="color: #00bd00;" aria-hidden="true">
						<use xlink:href="#icon-tongfeng"></use>
					</svg><br><span class="clicktext">通风</span>
				</span>
			</div><br>
			<!----------温度调节---------->
			<div style="margin:0 auto;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
				<span id="tmpr_down">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jian"></use>
					</svg>
				</span>&nbsp;
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-wendu1"></use>
				</svg>&nbsp;
				<span id="tmpr_up">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jia"></use>
					</svg>
				</span>
			</div><br>
			<!----------风速调节---------->
			<div style="margin:0 auto;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
				<span id="fan_down">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jian"></use>
					</svg>
				</span>&nbsp;
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-fengsu"></use>
				</svg>&nbsp;
				<span id="fan_up">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jia"></use>
					</svg>
				</span>
			</div><br>
			<!----------灯光调节---------->
			<div style="margin:0 auto;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
				<span class="iconclick">
					<span id="turbo_on" style="display: none;">
						<svg class="icon" style="color: #00aaff;" aria-hidden="true">
							<use xlink:href="#icon-chaoqiangfeng"></use>
						</svg><br>
						<span class="clicktext">超强:开</span>
					</span>
					<span id="turbo_off">
						<svg class="icon" style="color: #000000;" aria-hidden="true">
							<use xlink:href="#icon-chaoqiangfeng"></use>
						</svg><br>
						<span class="clicktext">超强:关</span>
					</span>
					
				</span>
				<span class="iconclick">
					<span id="sleep_on" style="display: none;">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-shuimian"></use>
						</svg><br>
						<span class="clicktext">睡眠:开</span>
					</span>
					<span id="sleep_off">
						<svg class="icon" style="color: #000000;" aria-hidden="true">
							<use xlink:href="#icon-shuimian1"></use>
						</svg><br>
						<span class="clicktext">睡眠:关</span>
					</span>
				</span>
				<span class="iconclick">
					<span id="light_on">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-kaideng"></use>
						</svg><br>
						<span class="clicktext">灯光:开</span>
					</span>
					
					<span id="light_off" style="display: none;">
						<svg class="icon" style="color: #000000;" aria-hidden="true">
							<use xlink:href="#icon-guandeng"></use>
						</svg><br>
						<span class="clicktext">灯光:关</span>
					</span>
				</span>
			</div><br>


			<div id="mainctrl">
				<button id="send_ac" type="button" class="btnnn">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-fasong"></use>
					</svg><a style="font-size: 36px;">发送信号</a>
				</button>
			</div>

		</div>
<script type="text/javascript">
	var APIurl ="https://xxxxxxxx.iou.ink";
	var TMPR = 27;
	var WIND =2;
	var acmode = "cool";//cool heat dry fan
	var lightmode = "lington";
	var turbomode ="turbooff";
	var sleepmode = "sleepoff";
	var data="";
	window.onload = function() {
		$("#temperature").html(""+TMPR);
		$("#fan_speed").html(""+WIND);
		$("#mode_cool").click(function() {setACmode("cool")});
		$("#mode_heat").click(function() {setACmode("heat")});
		$("#mode_dry").click(function() {setACmode("dry")});
		$("#mode_fan").click(function() {setACmode("fan")});
		$("#tmpr_down").click(function() {
			setTMPR("down");
		});
		$("#tmpr_up").click(function() {
			setTMPR("up");
		});
		$("#fan_down").click(function() {
			setFan("down");
		});
		$("#fan_up").click(function() {
			setFan("up");
		});
		
		$("#light_off").click(function() {
			setLight("on");
			$("#light_on").css('display', 'block');
			$("#light_off").css('display', 'none');
			showState();
		});
		$("#light_on").click(function() {
			setLight("off");
			$("#light_off").css('display', 'block');
			$("#light_on").css('display', 'none');
			showState();
		});
		
		$("#sleep_off").click(function() {
			sleepmode = "sleepon";
			$("#sleep_on").css('display', 'block');
			$("#sleep_off").css('display', 'none');
			showState();
		});
		$("#sleep_on").click(function() {
			sleepmode = "sleepoff";
			$("#sleep_off").css('display', 'block');
			$("#sleep_on").css('display', 'none');
			showState();
		});
		
		$("#turbo_off").click(function() {
			turbomode ="turboon";
			$("#turbo_on").css('display', 'block');
			$("#turbo_off").css('display', 'none');
			showState();
		});
		$("#turbo_on").click(function() {
			turbomode ="turbooff";
			$("#turbo_off").css('display', 'block');
			$("#turbo_on").css('display', 'none');
			showState();
		});

		$("#close_ac").click(function() {
			data="closeac;"+acmode+";"+TMPR+";"+WIND+";"+lightmode+";"+turbomode+";"+sleepmode;
			async_req(data);
		});
		$("#send_ac").click(function() {
			data="openac;"+acmode+";"+TMPR+";"+WIND+";"+lightmode+";"+turbomode+";"+sleepmode;
			async_req(data);
		});
	}

	function async_req(data){
		swal("正在请求，请稍后", "", "warning");
		var APIURL = APIurl+"/send_cmd?info=ACcontrol&type=cmd&cmd=";
		url = APIURL + data;try {
			tobj1 = $.ajax({
				url: url,
				async: true,
				success: function(data) {
					swal(data.info, "", data.type);
				}
			});
		} catch (e) //IE
		{
			swal("error request");
		}
	}
	function setTMPR(flag){
		if(flag == "up"){
			if(TMPR < 30){
				TMPR += 1;
			}
		}
		if(flag == "down"){
			if(TMPR > 16){
				TMPR -= 1;
			}
		}
		$("#temperature").html(" "+TMPR);
	}
	function setFan(flag){
		if(flag == "up"){
			if(WIND < 3){
				WIND += 1;
			}
		}
		if(flag == "down"){
			if(WIND > 1){
				WIND -= 1;
			}
		}
		$("#fan_speed").html(""+WIND);
	}
	function setLight(flag){
		if(flag == "on"){
			lightmode ="lighton";
		}
		if(flag == "off"){
			lightmode ="lightoff";
		}
		if(lightmode =="lighton"){
			$("#light_mode").html(" 开");
		}else{
			$("#light_mode").html(" 关");
		}
	}
	function setACmode(flag){
		if(flag == "cool"){
			acmode = "cool";
			$("#mode_icon").html('<svg class="icon smallicon" aria-hidden="true"><use xlink:href="#icon-icon-12"></use></svg>');
		}else if(flag == "heat"){
			acmode = "heat";
			$("#mode_icon").html('<svg class="icon smallicon" aria-hidden="true"><use xlink:href="#icon-heat"></use></svg>');
		}else if(flag == "dry"){
			acmode = "dry";
			$("#mode_icon").html('<svg class="icon smallicon" style="color: #0078FF;" aria-hidden="true"><use xlink:href="#icon-chushi"></use></svg>');
		}else if(flag == "fan"){
			acmode = "fan";
			$("#mode_icon").html('<svg class="icon smallicon" style="color: #3db900;" aria-hidden="true"><use xlink:href="#icon-tongfeng"></use></svg>');
		}
	}

					
	function showState(){
		console.log("  acmod   ="+acmode);
		console.log("   TMPR   ="+TMPR);
		console.log("   WIND   ="+WIND);
		console.log("lightmode ="+lightmode);
		console.log("turbomode ="+turbomode);
		console.log("sleepmode ="+ sleepmode);
		console.log("----------------------");
	}
</script>


	</body>
</html>
